<ui:composition template="/WEB-INF/templates/showcase.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:o="http://omnifaces.org/ui"
>
	<ui:define name="description">
		<p>
			The <code>&lt;o:componentIdParam&gt;</code> component allows to render just one or more components on a view via a GET
			parameter.
		</p>
		<p>
			Components can be identified via both their client id or simple component id. Via the former it's possible to
			e.g. render only a specific row in a table. For specific cases, it's possible to render only the parent
			component and omit any children.
		</p>
		<p>
			Among the use cases for this is creating simple mashups from various JSF based views, and scripts needing to obtain
			markup for specific components on an initial (non-faces) request.
		</p>
		<p>
			Note that this is a rather specialized component and for many common use cases the user is advised to investigate if the existing
			AJAX and partial page requests in JSF don't already cover the requirements. For the moment this component only supports the 
			direct output of the original markup and does not wrap it into any "partial response" envelope.
		</p>
	</ui:define>

    <ui:define name="demo-meta">
		<f:metadata>
			<o:componentIdParam componentIdName="component" clientIdName="client" />
		</f:metadata>
	</ui:define>

	<ui:define name="demo">

		<h3>Output</h3>
		<p><h:outputText id="foo" value="Foo component" /></p>
		<p><h:outputText id="bar" value="Bar Component" /></p>
		<p>
			<h:link target="_blank">
				<f:param name="component" value="foo"/>
				<f:param name="component" value="bar"/>
				Render foo and bar components on new page
			</h:link>
		</p>
		
		<hr/>

		<h3>Form</h3>
		<h:form id="form">
			Submitted value: #{componentParamBean.input}
			<h:inputText value="#{componentParamBean.input}" />
			<h:commandButton value="submit" />
		</h:form>
		<p>
			<h:link target="_blank">
				<f:param name="component" value="form"/>
				Render form on new page
			</h:link>
		</p>

		<hr/>

		<h3>Table</h3>
		<h:dataTable id="table" value="#{componentParamBean.tableItems}" var="item">
			<h:column>
				<h:panelGroup id="pop">
					<h:outputText id="row" value="#{item}" />
				</h:panelGroup>
			</h:column>
		</h:dataTable>
		<p>
			<h:link target="_blank">
				<f:param name="component" value="table"/>
				Render only table component on new page
			</h:link>
			<br/>
			<h:link target="_blank">
				<f:param name="client" value="table:1:row"/>
				Render single table row on new page
			</h:link>
			<br/>
			<a href="#" onclick="$('#contentDiv').load('#{request.requestURI}?component=table'); return false;">
			   Load table into below <code>&lt;div&gt;</code> using jQuery
			</a>
		</p>
		<div id="contentDiv"></div>
		
		<hr/>

		<h3>Expandable list</h3>
		<ul id="list">
			<ui:repeat id="listRepeater" value="#{componentParamBean.listItems}" var="item">
				<li>
					<h:form>
						#{item}
						<h:commandLink value="select" action="#{componentParamBean.setSelectedItem(item)}">
							<f:param name="start" value="#{componentParamBean.start}" />
							<f:ajax render=":selectedItem" />
						</h:commandLink>
					</h:form>
				</li>
			</ui:repeat>
		</ul>
		<p>
			<input type="button" id="showMore" value="Show 3 more using jQuery" />
			Selected item: <strong><h:outputText id="selectedItem" value="#{componentParamBean.selectedItem}" /></strong>
		</p>
		<p>
			Remember to pass start index as <code>&lt;f:param&gt;</code> along command links/buttons inside repeated item, 
			so that the model can properly be preinitialized to identify the repeated item on which the action is invoked.
			See also the "select" command link source code of this example.
		</p>
		<h:outputScript>
            $("#showMore").click(function() {
                $list = $("#list");
                var params = { start: $list.find("li").length, component: "listRepeater" };
                $.get(location, params, function(html) {
                    $list.append(html);
                });
            });
        </h:outputScript>
	</ui:define>
	
</ui:composition>